<template>
  <div style="position: absolute; width: calc(100% - 40px);">
    <el-tag v-show="selections.length > 0">已选{{ selections.length }}人</el-tag>
    <el-table
      ref="table"
      :data="tableData"
      :height="330"
      stripe
      @select="selectAction"
      @select-all="selectAction"
    >
      <el-table-column type="selection" width="50" />
      <el-table-column label="姓名" width="80">
        <template slot-scope="scope">{{ scope.row.name }}</template>
      </el-table-column>
      <el-table-column label="组织">
        <!-- <template #header="scope">
          <el-checkbox
            v-model="tag"
            :true-label="constant.INCLUDE_CHILD_DEPARTMENT"
            :false-label="constant.EXCLUDE_CHILD_DEPARTMENT"
            @change="fetchUsers()"
          >查询子部门用户
          </el-checkbox>
        </template> -->
        <template slot-scope="scope">
          <el-tooltip class="item" effect="dark" :content="scope.row.orgName" placement="top-start">
            <div class="over-ell">{{ scope.row.orgName }}</div>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column width="150" label="岗位">
        <!-- <template #header="scope">
          <div class="zlst-table-header--right">
            <a href="javascript:;" @click="showSelections">已选<em>{{ selections.length }}</em>人</a>
          </div>
        </template> -->
        <template slot-scope="scope">
          <el-tooltip class="item" effect="dark" :content="scope.row.post" placement="top-start">
            <div class="over-ell">{{ scope.row.post }}</div>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      :current-page="pageIndex"
      :page-sizes="[20, 40, 60, 80, 100]"
      :page-size="pageSize"
      layout="total, prev, pager, next"
      :total="totalNum"
      small
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script>
import EventBus from '../../bus'
import $http from '@/api/server/http'

// 是否包含子部门 0 为包含，1 为不包含
const INCLUDE_CHILD_DEPARTMENT = 0
const EXCLUDE_CHILD_DEPARTMENT = 1

export default {
  name: 'CheckBoxTable',
  filters: {
    postName(row) {
      return row.posts.length ? row.posts[0].postName : ''
    }
  },
  model: {
    prop: 'value',
    event: 'change'
  },
  props: {
    value: {
      type: Array,
      default() {
        return []
      }
    },
    orgId: {
      type: String,
      default: null
    },
    conditions: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      // 显示模式
      // api 模式 是从后台读取数据
      // selected 模式是列举出已选的数据
      mode: 'api',
      currentPage: -1,
      tableData: [],
      tag: EXCLUDE_CHILD_DEPARTMENT,
      statusFlag: 1,
      selections: this.value,
      constant: {
        INCLUDE_CHILD_DEPARTMENT,
        EXCLUDE_CHILD_DEPARTMENT
      },
      pageIndex: 1,
      pageSize: 20,
      totalNum: 0,
      tbWidth: 0
    }
  },
  watch: {
    orgId() {
      this.mode = 'api'
      this.fetchUsers()
    }
  },
  created() {
    EventBus.$on('orgSearchUserModal.searchUser', this.fetchUsers)
    this.$emit('change', this.selections)
  },
  beforeDestroy() {
    EventBus.$off('orgSearchUserModal.searchUser', this.fetchUsers)
  },
  methods: {
    // 改变页码
    handleCurrentChange(val) {
      this.pageIndex = val
      this.fetchUsers()
    },
    // 改变每页条数
    handleSizeChange(val) {
      this.pageSize = val
      this.fetchUsers()
    },
    getParams() {
      const params = {
        pageIndex: this.pageIndex,
        pageSize: this.pageSize,
        filters: []
      }
      if (this.orgId) {
        params.filters.push({
          condition: this.orgId,
          field: 'orgId',
          op: 'IS'
        })
      }
      if (this.conditions && this.conditions.name) {
        params.filters.push({
          condition: this.conditions.name,
          field: 'name',
          op: 'LIKE'
        })
      }
      if (this.conditions && this.conditions.empType) {
        params.filters.push({
          condition: this.conditions.empType,
          field: 'empType',
          op: 'IS'
        })
      }
      if (this.conditions && this.conditions.post) {
        params.filters.push({
          condition: this.conditions.post,
          field: 'post',
          op: 'LIKE'
        })
      }
      if (this.conditions && this.conditions.workGroupId) {
        params.filters.push({
          condition: this.conditions.workGroupId,
          field: 'workGroupId',
          op: 'IS'
        })
        params.filters.shift()
      }
      return params
    },
    fetchUsers() {
      $http.post('humaninfoPage', this.getParams())
        .then(res => {
          if (res.data.resultCode !== 0) {
            return false
          }
          this.tableData = res.data.data
          this.totalNum = res.data.totalNum
          // 渲染已选中项
          const valueList = this.selections.map(item => {
            return item._id
          })
          const rows = this.tableData.filter((item, index) => {
            return valueList.includes(item._id)
          })
          this.$nextTick(() => {
            this.toggleSelection(rows)
          })
        })
    },
    showSelections() {
      this.mode = 'selected'
      // this.fetchUsers(1)
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.table.toggleRowSelection(row)
        })
      } else {
        this.$refs.table.clearSelection()
      }
    },
    selectAction(selection, row) {
      const selectionsId = this.selections.map(item => item._id) ? this.selections.map(item => item._id) : []
      const selectId = selection.map(item => item._id)
      const allSelect = [...new Set(selectionsId.concat(selectId))]
      if (row) {
        const rowId = row._id
        // 删除
        if (!selectId.includes(rowId)) {
          allSelect.splice(allSelect.indexOf(rowId), 1)
        }
      } else {
        if (selection.length === 0) {
          this.tableData.forEach(item => {
            allSelect.splice(allSelect.indexOf(item._id), 1)
          })
        }
      }
      var realSelect = []
      var allData = this.tableData.concat(this.selections)
      allSelect.forEach(item => {
        const selectItem = allData.find(val => val._id === item)
        realSelect.push(selectItem)
      })
      this.selections = realSelect
      this.$emit('change', this.selections)
    }
  }
}
</script>

<style lang="scss" scoped>
  .el-table, .el-table__expanded-cell {
    background-color: #f8f9fa;
  }
  /deep/ .el-table th, /deep/ .el-table tr {
    background-color: #f8f9fa;
    .zlst-table-header--right {
      display: block;
      text-align: right;
      a em {
        color: #3ea9f5;
        font-style: normal;
      }
    }
  }
  .over-ell{
    width: 100%;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
  }
</style>
